    <!doctype html>  
    <html>  
      <head>  
        <title>聊天室</title>  
        <style>  
          * { margin: 0; padding: 0; box-sizing: border-box; }  
          body { font: 20px Helvetica, Arial; }  
          form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }  
          form input { border: 0; padding: 10px; width: 90%;  }  
          form button { width: 10%; background: rgb(130, 224, 255); border: none;  padding: 10px; }  
          #messages { list-style-type: none; margin: 0; padding: 0; }  
          #messages li { padding: 5px 10px 5px 10px; }  
        </style>  
      </head>  
      <body>  
        <ul id="messages"></ul>  
        <form action="">  
          <input id="m" autocomplete="off" /><button id="btn">登录</button>  
        </form>  
        <script src="/socket.io/socket.io.js"></script>  
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>  
        <script>  
          var socket = io();  
          var login  =true;  
          var username = "" ;   
          var myDate = new Date();  
          $('form').submit(function(){  
             if(login){  
               username = $('#m').val();  
               if(username.length==0){  
                   alert("请输入用户名");  
                   return false;  
                }  
               login = false ;  
               socket.emit('login message', "lyd__<font color=blue>"+username + '</font>加入了聊天室   '+myDate.getMonth()+"-"+myDate.getDate()+" "+myDate.getHours()+":"+myDate.getMinutes()+":"+myDate.getSeconds());  
               $('#btn').html("发送");  
             }else {   
               socket.emit('chat message', username +"##"+ $('#m').val());  
            }  
             $('#m').val('');  
            return false;  
          });  
            socket.on('chat message', function(msg){  
            var item = msg.split("##",2);  
            if(msg.indexOf('lyd__')==0)  
              $('#messages').append('<li style="text-align:center; font-size:12px;margin-top:1px; color:red; background-color:#eee;">' +msg.substr(5)+'</li>');  
            else if(msg.indexOf(username)==0){  
              $('#messages').append('<li style="text-align:right; font-size:12px; color:red;">'+item[0]+':</li>');  
              $('#messages').append('<li style="text-align:right;padding-top:0px; padding-left:30%;color:purple;">'+item[1]+'</li>');  
            }else {  
              $('#messages').append('<li style="text-align:left;font-size:12px; color:red;">'+item[0]+':</li>');  
              $('#messages').append('<li style="text-align:left;padding-top:0px; padding-right:30%; color:purple;">'+item[1]+'</li>');  
            }  
          });  
        </script>  
      </body>  
    </html>  
